<script setup lang="ts">
import { ref,reactive, computed } from 'vue'; 

const productArray=reactive([
    {
        proId:101,
        proName:"iphone17",
        proPrice:5000,
        count:2,
        proImg:new URL("../assets/images/iphone.svg",import.meta.url).href,
        ProStatus:0 ,//0:未删除，1：已删除
        selectStatus:true
    },
    {
        proId:102,
        proName:"xiaomi",
        proPrice:3000,
        count:1,
        proImg:new URL("../assets/images/xiaomi.svg",import.meta.url).href,
        ProStatus:0 ,//0:未删除，1：已删除
        selectStatus:true
    },
    {
        proId:103,
        proName:"huawei",
        proPrice:7000,
        count:3,
        proImg:new URL("../assets/images/huawei.svg",import.meta.url).href,
        ProStatus:0 ,//0:未删除，1：已删除
        selectStatus:false
    },
    {
        proId:104,
        proName:"oppo",
        proPrice:4000,
        count:2,
        proImg:new URL("../assets/images/oppo.svg",import.meta.url).href,
        ProStatus:0 ,//0:未删除，1：已删除
        selectStatus:false
    },
])

//小计
function sum(a,b){
    return a*b
}

//计算状态为0的总价格
const sumStatusPrice = computed(()=>{
   return productArray.filter(item => item.selectStatus===true&&item.ProStatus===0).reduce((total,item)=>total+item.proPrice*item.count,0)
})
//计算状态为0的总商品数量
const sumStatusNumber=computed(()=>{
    return productArray.filter(item=>item.selectStatus===true&&item.ProStatus===0).reduce((total,item)=>total+item.count,0)
})

//给全选框加一个状态
const btnSelectAllChecked = ref(false)
//全选,将所有的状态改为全选框的状态
function selectAll(){
    productArray.forEach(function (value){
        value.selectStatus=btnSelectAllChecked.value
    })
}
//将选中的删除:就是将selectStatus=true的商品的ProStatus改为1
function btnDelete(){
   productArray.forEach(function (value){
    if(value.selectStatus){
        value.ProStatus=1
    }
   })
}
//删除按钮确认框
function deleteProduct(product){
    if(confirm("你确认删除该商品吗?")){
        product.ProStatus=1
    }
}
//批量删除确认框
function delSelectAll(){
    if(confirm("你确定要删除这些商品吗?")){
        productArray.forEach(function(value){
            if(value.selectStatus){
                value.ProStatus=1
            }
        })
    }
}


</script>

<template>
    <div>
        <div class="cart">
        <ul>
            <li ><h1>全部商品</h1></li>
            <li class="title">
                <p class="p1">
                    全选
                    <span>商品</span>
                </p>
                <p class="p2">
                <span>单价</span>
                <span>数量</span>
                <span>小计</span>
                <span>操作</span>
                </p>
            </li>

            <ul v-for="pro in productArray" :key="pro.proId" >
                <li v-if="pro.ProStatus==0">
                    <input type="checkbox" name="product" v-model="pro.selectStatus">
                    <img :src="pro.proImg" />
                    {{ pro.proName }},
                    {{ pro.proPrice }},
                    <button @click="pro.count--">-</button>{{ pro.count }}<button @click="pro.count++">+</button>
                    {{ sum(pro.count,pro.proPrice)}}
                    <!-- <button @click="pro.ProStatus=1">删除</button> -->
                    
                    <button @click="deleteProduct(pro)">删除</button>
                </li>
            </ul>


                       
            <li class="product">
                <span class="left">
                    <input type="checkbox" @change="selectAll" v-model="btnSelectAllChecked" >全选
                    <!-- <button @click="btnDelete">删除所选</button> -->
                    <button @click="delSelectAll">删除所选</button>
                </span>
                <span class="right">
                    <span>已选择<em>{{sumStatusNumber}}</em>件商品</span>
                    <span>总价：<em>￥{{ sumStatusPrice }}</em></span>
                    <button>去结算</button>
                </span>
            </li>

        </ul>
    </div>
    </div>

</template>

<style scoped>
    /* 导入css */
    @import url(../assets/css/cart.css);
</style>